<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img />
    <button onclick="setSrc()">设置图片的地址</button>
    <button onclick="getSize()">输出图片的尺寸</button>
    <button onclick="setRightTop()">将图片显示在右上角</button>
    <button onclick="setLeftTop()">将图片显示在左上角</button>
    <button onclick="setBorder()">设置图片的边框"2px solid #000"</button>
    <button onclick="setBorderColor()">设置图片的边框颜色为"red"</button>
    <script>
        var img = document.querySelector('img');
        function setSrc(){
            img.src = 'https://www.baidu.com/img/baidu_jgylogo3.gif';
        }
        function getSize(){
            // 直接通过属性获取
            var width = img.width;
            // 通过计算的css属性获取
            var height = getComputedStyle(img).height;
            // 通过css属性获取  可能获取不到数据
            var cssHeight = img.style.height;
            console.log('size:',width,height,cssHeight);
        }
        function setRightTop(){
            img.style.position='absolute';
            img.style.top = 0;
            img.style.right= 0;
            img.style.left = 'auto';
        }
        function setLeftTop(){
            img.style.position='absolute';
            img.style.top = 0;
            img.style.left = 0;
            img.style.right = 'auto';
        }
        function setBorder(){
            img.style.border = 'solid 2px #000'
        }
        function setBorderColor(){
            img.style['border-color'] = 'red';
            img.style.borderColor = 'red';
        }
    </script>
</body>

</html>